/*eslint-disable*/
// @ts-nocheck

import {
  Cartesian2,
  Cartesian3,
  ClassificationType,
  Color,
  CustomDataSource,
  DistanceDisplayCondition,
  HorizontalOrigin,
  ImageMaterialProperty,
  NearFarScalar,
  PolylineGlowMaterialProperty,
  Rectangle,
  Resource,
  VerticalOrigin,
  Viewer,
  writeTextToCanvas,
} from '@space8/czm-plugin';
import JSON4 from './4.json';
import JSON5 from './5.json';
import { getGlobalViewer } from '@/components/GlobalCesium';
import { useCesiumEvent } from './useCesiumEvent';
import { getPanoramaList } from '@/api/panorama/baseData';
import PolylineTrailMaterialProperty
  from '@/components/GlobalCesium/src/PolylineTrailMaterialProperty';
import {
  addBaseImageLayers,
  addBussImageLayers,
  addFlowReservoirs,
  addFlowRiver,
  loadAnimateStation,
} from '@/components/GlobalCesium/src/cesiumGlobe';

function getWidth(data: string) {
  if (data === '1') {
    return 20;
  } else if (data === '2') {
    return 8;
  } else if (data === '3') {
    return 8;
  } else {
    return 8;
  }
}

function getLineColor(id: number) {
  if (id === 1 || id === 4 || id === 6) {
    return '#51FBFF';
  } else if (id === 2) {
    return '#34FF93';
  } else if (id === 3 || id === 5) {
    return '#FDF62E';
  }
}

// 添加需要的地图数据
export function addMapData() {
  const viewer: Viewer = getGlobalViewer();

  viewer.scene.screenSpaceCameraController.maximumZoomDistance = 70000;

  addBaseImageLayers();
  addBussImageLayers();
  // addTerrain();
  addFlowReservoirs();
  loadAnimateStation('all');

  // 加载背景图
  viewer.entities.add({
    rectangle: {
      coordinates: Rectangle.fromDegrees(118.764, 32.204, 119.142, 32.441),
      material: new ImageMaterialProperty({
        image: 'texture/background.png',
      }),
      zIndex: 1,
    },
  });

  // 示范区标注
  viewer.entities.add({
    type: 'toInner',
    position: Cartesian3.fromDegrees(118.88864, 32.35081),
    billboard: {
      image: 'texture/scope-1.png',
      horizontalOrigin: HorizontalOrigin.LEFT,
      verticalOrigin: VerticalOrigin.BOTTOM,
      disableDepthTestDistance: Number.MAX_VALUE,
      scaleByDistance: new NearFarScalar(3000, 1.0, 50000, 0.3),
    },
  });

  // 街道标注
  const streetData = [
    {
      position: Cartesian3.fromDegrees(118.87682, 32.30329),
      url: 'texture/street1.png',
    },
    {
      position: Cartesian3.fromDegrees(118.95972, 32.31128),
      url: 'texture/street2.png',
    },
    {
      position: Cartesian3.fromDegrees(119.01089, 32.2553),
      url: 'texture/street3.png',
    },
  ];
  for (let i = 0; i < streetData.length; i++) {
    viewer.entities.add({
      position: streetData[i].position,
      billboard: {
        image: streetData[i].url,
        verticalOrigin: VerticalOrigin.BOTTOM,
        disableDepthTestDistance: Number.MAX_VALUE,
        scaleByDistance: new NearFarScalar(3000, 1.0, 50000, 0.5),
        distanceDisplayCondition: new DistanceDisplayCondition(10000, Number.MAX_VALUE),
      },
    });
  }

  // 水库
  const staticData = [
    {
      text: '新禹河闸',
      position: Cartesian3.fromDegrees(118.986416, 32.267584),
      image: 'hezha-1.png',
      direction: 'right',
    },
    {
      text: '红山窑枢纽',
      position: Cartesian3.fromDegrees(118.927359, 32.249908),
      image: 'shuniu-1.png',
      direction: 'right',
    },
    {
      text: '三友水库',
      position: Cartesian3.fromDegrees(119.007515, 32.387204),
      image: 'shuiku1-1.png',
      direction: 'left',
    },
    {
      text: '东方红水库',
      position: Cartesian3.fromDegrees(119.015018, 32.362097),
      image: 'shuiku2-1.png',
      direction: 'right',
    },
    {
      text: '汉塘水库',
      position: Cartesian3.fromDegrees(119.0118761, 32.3432586),
      image: 'shuiku3-1.png',
      direction: 'left',
    },
    {
      text: '南王水库',
      position: Cartesian3.fromDegrees(119.019546, 32.325987),
      image: 'shuiku4-1.png',
      direction: 'right',
    },
  ];
  for (let i = 0; i < staticData.length; i++) {
    viewer.entities.add({
      type: 'reservoir',
      position: staticData[i].position,
      billboard: {
        image: 'texture/' + staticData[i].image,
        horizontalOrigin: staticData[i].direction === 'left' ? HorizontalOrigin.RIGHT : HorizontalOrigin.LEFT,
        verticalOrigin: VerticalOrigin.BOTTOM,
        disableDepthTestDistance: Number.MAX_VALUE,
        scaleByDistance: new NearFarScalar(3000, 1.0, 50000, 0.3),
      },
    });
  }

  addFlowRiver('whole'); // 全区河道

  // 全区渠道-线
  const qudaoDataSource = new CustomDataSource('qudao');
  viewer.dataSources.add(qudaoDataSource);
  Resource.fetchJson('data/gqqx.geojson').then((response) => {
    response.features.forEach((feature) => {
      const positions = feature.geometry.coordinates[0].map((t) => Cartesian3.fromDegrees(t[0], t[1]));
      qudaoDataSource.entities.add({
        type: 'qudao', // 自定义类型
        properties: feature.properties,
        polyline: {
          positions: positions,
          width: getWidth(feature.properties['级别'] + ''),
          clampToGround: true,
          material: new PolylineTrailMaterialProperty({
            color: Color.fromCssColorString('#3ae4e3'),
            speed: 10,
          }),
          classificationType: ClassificationType.BOTH,
          zIndex: 2,
        },
      });
    });
  });
  Resource.fetchJson('data/gan.geojson').then((response) => {
    response.features.forEach((feature) => {
      const positions = feature.geometry.coordinates[0].map((t) => Cartesian3.fromDegrees(t[0], t[1]));
      qudaoDataSource.entities.add({
        type: 'qudao', // 自定义类型
        properties: feature.properties,
        polyline: {
          positions: positions,
          width: 20,
          clampToGround: true,
          material: new PolylineGlowMaterialProperty({
            color: Color.fromCssColorString('#eedb4b'),
            glowPower: 0.5,
          }),
          classificationType: ClassificationType.BOTH,
          zIndex: 2,
          distanceDisplayCondition: new DistanceDisplayCondition(10000, Number.MAX_VALUE),
        },
      });
    });
  });

  // // 街道面
  // viewer.entities.add({
  //   polygon: {
  //     hierarchy: JSON1.features[0].geometry.coordinates[0][0].map((t) => Cartesian3.fromDegrees(t[0], t[1])),
  //     material: Color.fromCssColorString('#FDD82E').withAlpha(0.2),
  //     distanceDisplayCondition: new DistanceDisplayCondition(20000, Number.MAX_VALUE),
  //   },
  // });
  //
  // // 街道面
  // viewer.entities.add({
  //   polygon: {
  //     hierarchy: JSON2.features[0].geometry.coordinates[0][0].map((t) => Cartesian3.fromDegrees(t[0], t[1])),
  //     material: Color.fromCssColorString('#8BFFC2').withAlpha(0.2),
  //     distanceDisplayCondition: new DistanceDisplayCondition(20000, Number.MAX_VALUE),
  //   },
  // });
  //
  // // 街道面
  // viewer.entities.add({
  //   polygon: {
  //     hierarchy: JSON3.features[0].geometry.coordinates[0][0].map((t) => Cartesian3.fromDegrees(t[0], t[1])),
  //     material: Color.fromCssColorString('#06B7FD').withAlpha(0.2),
  //     distanceDisplayCondition: new DistanceDisplayCondition(20000, Number.MAX_VALUE),
  //   },
  // });

  // 街道边线
  JSON5.features.forEach((feature) => {
    viewer.entities.add({
      polyline: {
        positions: Cartesian3.fromDegreesArray(feature.geometry.coordinates[0].flat(2)),
        material: Color.fromCssColorString(getLineColor(feature.properties.id)).withAlpha(0.9),
        distanceDisplayCondition: new DistanceDisplayCondition(10000, Number.MAX_VALUE),
        width: 5,
      },
    });
  });

  // 示范区高亮线
  viewer.entities.add({
    polyline: {
      positions: JSON4.features[0].geometry.coordinates[0][0].map((t) => Cartesian3.fromDegrees(t[0], t[1])),
      width: 12,
      material: Color.WHITE.withAlpha(0.6),
      distanceDisplayCondition: new DistanceDisplayCondition(10000, Number.MAX_VALUE),
    },
  });

  // 标注长江
  viewer.entities.add({
    rectangle: {
      coordinates: Rectangle.fromDegrees(
        118.9644864017667345,
        32.1753054069231155,
        118.9875039811722672,
        32.184236757501111,
      ),
      material: new ImageMaterialProperty({
        image: writeTextToCanvas('长江', {
          font: 'bold 50px Microsoft YaHei',
        }).toDataURL('image/png'),
        transparent: true,
      }),
      zIndex: 5,
      height: 10,
    },
  });

  // 事件
  useCesiumEvent();

  // 添加全景坐标数据加载在地图上
  addPhotoViewer360(viewer);
}

// async function buildImage(label: string, imageUrl: string) {
//   const canvas = document.createElement('canvas');
//   canvas.width = 260;
//   canvas.height = 277;
//   let ctx = canvas.getContext('2d');
//   const image = await Resource.fetchImage({ url: 'texture/bg.png' });
//   const picture = await Resource.fetchImage({ url: 'texture/' + imageUrl });
//   ctx.drawImage(image, 0, 0);
//   ctx.drawImage(picture, 22, 80);
//   ctx.fillStyle = Color.WHITE.toCssColorString();
//   ctx.font = 'italic bold 36px Microsoft YaHei';
//   ctx.textAlign = 'center';
//   ctx.textBaseline = 'middle';
//   ctx.fillText(label, 130, 46);
//   return canvas.toDataURL('image/png');
// }

// 添加全景图数据
const addPhotoViewer360 = (viewer: Viewer) => {
  const view360DataSource = new CustomDataSource('360');
  view360DataSource.show = false;
  viewer.dataSources.add(view360DataSource);
  getPanoramaList({}).then((recordsList) => {
    const view360Data = recordsList.records;
    for (let i = 0; i < view360Data.length; i++) {
      view360DataSource.entities.add({
        type: 'view360',
        properties: {
          panorama: view360Data[i].panorama,
          markers: view360Data[i].markers,
          smallImgUrl: view360Data[i].smallImgUrl,
        },
        position: Cartesian3.fromDegrees(+view360Data[i].lgtd, +view360Data[i].lttd, 50),
        point: {
          pixelSize: 80,
          color: Color.fromCssColorString('#203253'),
          outlineColor: Color.WHITE,
          outlineWidth: 1,
          scaleByDistance: new NearFarScalar(0, 1, 50000, 0.5),
        },
        label: {
          text: view360Data[i].name,
          font: '50px Microsoft YaHei',
          pixelOffset: new Cartesian2(0, -100),
          distanceDisplayCondition: new DistanceDisplayCondition(0, 2000),
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
        },
      });
    }
  });
};
